<template>
  <div class="app-container">
    <h1>用户名:{{ userInfo.name }}</h1>
    <h2>头像: {{ userInfo.avatar }}</h2>
    <h3>权限: {{ userInfo.roles }}</h3>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "profile",
  props: {},
  components: {},
  data() {
    return {
      userInfo: {},
    };
  },
  watch: {},
  created() {
    this.getUserInfo();
  },
  mounted() {},
  methods: {
    getUserInfo() {
      this.userInfo = {
        name: this.name,
        avatar: this.avatar,
        roles: this.roles.join("|"),
      };
    },
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles"]),
  },
};
</script>

<style scoped lang="less"></style>
